<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>收支明细</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/mrs.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/media.css{$JSDEBUG}"/>
    <style>
    	*{
		    margin: 0;
		    padding:0;
		    -webkit-tap-highlight-color:rgba(0,0,0,0);
		    -webkit-text-size-adjust:none;
		}
		html{
		    font-size:10px;
		}
		body{
		    background-color: #f7f7f9;
		    font-size: 1.2em;
		}
		.outer {padding-top: 46px;}
	</style>
</head>
<body style="background:#f7f7f9;">
<include file="Public/customHeader" title="收支明细" url="{:U('Beautician/count')}"/>
<div class="outer">
	<div class="inner">
		<div class="lists">
	  		<div class="count_cash_list">
	      	<ul>
	        	<foreach name="data" item="vo">
	         	<li>                       	
		           	<if condition="$vo['income'] gt $vo['expend']">
		           		<img src="__PUBLIC__/app/images/count_05.png">
		           	<else />
		           		<img src="__PUBLIC__/app/images/count_06.png">
		           	</if>            
	           		<dd>
		              	<span>
		                	<if condition="$vo['income'] gt $vo['expend']">{$vo.income}<else />{$vo.expend}</if>
		              	</span>
		              	<label>{$vo['created']|date='Y-m-d H:i:s',###}</label>
	           		</dd>
	           		<dd><if condition="$vo['income'] gt 0">服务收入</if>
	           		<if condition="$vo['expend'] gt 0">提现</if><strong><if condition="$vo['remark']">({$vo['remark']})</if></strong></dd>
	         	</li>
	         </foreach>
	      	</ul>
	      	<if condition="!$data">
		      	<div class="no_bank">
			      	<h1>美滴滴</h1>
			      	<p>您还没有收支明细！</p>
		     	</div>
	     	</if>
	    	</div>
	    </div>
	</div>
</div>
<if condition="$hasMore">
<script src="__FONT__/js/zepto.min.js"></script>
<script src="__FONT__/js/dropload.min.js"></script>
<script type="text/javascript" src="__FONT__/js/mustache.js"></script>
<script>
var hasMore = true,
	nextPage = '{$nextPage}',
	itemTemp = '<li>'                       	
        +'<img src="{{#isIncome}}__PUBLIC__/app/images/count_05.png{{/isIncome}}{{^isIncome}}__PUBLIC__/app/images/count_06.png{{/isIncome}}">'
        +'<dd>'
        +'<span>'
        +'{{#isIncome}}{{income}}{{/isIncome}}{{#isExpend}}{{expend}}{{/isExpend}}'
        +'</span>'
        +'<label>{{time}}</label>'
        +'</dd>'
        +'<dd>{{type_txt}}<strong>{{#showRemark}}({{remark}}){{/showRemark}}</strong></dd>'
        +'</li>';
	$(function () {
		$('.inner').dropload({
		    domUp : {
		        domClass   : 'dropload-up',
		        domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
		        domUpdate  : '<div class="dropload-update">↑释放更新</div>',
		        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
		    },
		    domDown : {
		        domClass   : 'dropload-down',
		        domRefresh : '<div class="dropload-refresh loadbtn">↑上拉加载更多</div>',
		        domUpdate  : '<div class="dropload-update loadbtn">↓释放加载</div>',
		        domLoad    : '<div class="dropload-load loadbtn"><span class="loading"></span>加载中...</div>'
		    },
		    loadUpFn : function(me){
		    	if (!hasMore) {
		    		 setTimeout(function(){
		    			me.resetload();
		    		 }, 1000);
		    		return false;
		    	}
		        $.ajax({
		            type: 'GET',
		            url: '{:U("/User/loadMoreOrder")}',
		            dataType: 'json',
		            success: function(data){
		                var result = '';
		                for(var i = 0; i < data.lists.length; i++){
		                    result +=   '<a class="item opacity">'
		                                    +'<img src="'+data.lists[i].pic+'" alt="">'
		                                    +'<h3 href="'+data.lists[i].link+'" >'+data.lists[i].title+'</h3>'
		                                    +'<span class="date">'+data.lists[i].date+'</span>'
		                                +'</a>';
		                }
		                // 为了测试，延迟1秒加载
		                setTimeout(function(){
		                    $('.lists').html('');
		                    $('.lists').prepend(result);
		                    me.resetload();
		                },1000);
		            },
		            error: function(xhr, type){
		                me.resetload();
		            }
		        });
		    },
		    loadDownFn : function(me){
		    	if (!hasMore) {
		    		$('.dropload-down div.dropload-load').empty().append('没有更多数据了!');
		    		 setTimeout(function(){
		    			me.resetload();
		    		 }, 1000);
		    		return false;
		    	}
		    	
		        $.ajax({
		            type: 'GET',
		            url: nextPage,
		            dataType: 'json',
		            success: function(result){
		            	if (result.status == 1) {
		            		var itemHtml = '';
		            		if (!$.isEmptyObject(result.data)) {
		            			data = result.data;
		            			for(var i in data){
		            				var record = data [i];
		            				
		            				record.isIncome = record.income > 0;
		            				record.isExpend = record.expend > 0;
		            				if (record.isIncome) {
		            					record.type_txt = '服务收入';
		            				} else {
		            					record.type_txt = '提现';
		            				}
		            				
		            				record.showRemark = $.trim(record.remark) == ''?false:true;
		            				itemHtml += Mustache.render(itemTemp, record);
					      		}
		            		}
			               
		            		itemHtmlObj = $(itemHtml);
			                // 为了测试，延迟1秒加载
			                setTimeout(function(){
			                    $('.count_cash_list ul').append(itemHtmlObj);
			                    me.resetload();
			                },1000);
			                
			                if (result.hasMore) {
			                	nextPage = result.nextPage;
			                } else {
			                	hasMore = false;
			                }
		            	}
		            },
		            error: function(xhr, type){
		                me.resetload();
		            }
		        });
		    }
		});
	})
</script>
</if>
</body>	
</html>
